<template>
    <el-dialog :visible.sync="dialogView" top="100px" custom-class="seeRecordDetail">
        <div class="common-table-title">
            <div class="common-table-icon"></div>
            <div class="common-table-fl">查看</div>
        </div>
        <div class="detailBox">
            <div class="detailBoxDiv">
                <el-row>
                    <div class="dialogItemTitle">
                        <img src="@/assets/img/flower_brown.png" alt="">
                        <p class="text">商品明细</p>
                    </div>
                    <el-table
                        :data="goodsDetailArr"
                        :row-style="selectedHighlight"
                        max-height="300"
                        @selection-change="handleSelectionChange"
                    >
                        <el-table-column
                            type="selection"
                            width="100"
                        />
                        <el-table-column
                            v-for="(item, index) in goodsDetail"
                            :key="index"
                            :prop="item.prop"
                            :label="item.label"
                            :width="item.width"
                        />
                    </el-table>
                    <div class="dialogItemTitle">
                        <img src="@/assets/img/flower_brown.png" alt="">
                        <p class="text">质检记录</p>
                    </div>
                    <el-table
                        :data="supplierQualityRecord"
                        :row-style="selectedHighlight"
                        max-height="300"
                        @selection-change="handleSelectionChange"
                    >
                        <el-table-column
                            v-for="(item, index) in qualityRecordItems2"
                            :key="index"
                            :prop="item.prop"
                            :label="item.label"
                            :width="item.width"
                            align='center'
                        />
                    </el-table>
                </el-row>
            </div>
        </div>
    </el-dialog>
</template>
<script>
    import datas from '../datas.js'
    import * as requests from '../axios.js'
    export default {
        data() {
            return {
                dialogView: false,
                // 弹出窗质检记录
                qualityRecordItems2: datas.qualityRecordItems2,
                // 获取到的供应商质检记录
                supplierQualityRecord: [],
                // 商品明细列表项
                goodsDetail: datas.goodsDetail,
                // 商品明细列表数据
                goodsDetailArr: [],
                TableSelectData: []
            }
        },
        props: {
            
        },
        methods: {
            async openBox(barcode, id) {
                this.dialogView = true;
                requests.getDetails(barcode).then(rowDetails => {
                    if(rowDetails && rowDetails.data.status === 200) {
                        this.supplierQualityRecord = rowDetails.data.result.supplierQualityRecord
                        this.goodsDetailArr = rowDetails.data.result.supplierQualityRecord[0].sapGoodsInfo ? new Array(rowDetails.data.result.supplierQualityRecord[0].sapGoodsInfo) : []
                    }
                }).catch(err => {
                    console.log('err: ', err)
                });
            },
            handleSelectionChange (selection) {
                // 选中的数组
                this.TableSelectData = selection;
            },
            selectedHighlight (data) {
                // 如果选中则添加高亮样式
                if (this.TableSelectData.indexOf(data.row) > -1) {
                    return {
                        "background-color": "#FEF6EE"
                    };
                    return {}
                }
            },
        },
    }
</script>
<style scoped>
    .detailBox{
        width: 94%;
        margin-left:3%;
        overflow-x: hidden;
        transform:translateX(-.85rem)
    }
    .detailBoxDiv{
        width: 100%;
        height: 34rem;
        overflow-y: scroll;
        margin-left: 1.7rem;
    }
</style>